<template>
  <div class="home">
    <homeHeader></homeHeader>
    <div id="bottom">
      <menuNav></menuNav>
      <main id="content">
        <template>
          <div>
            <el-button style="height:30px;width:60px;padding:0;margin-top:30px" @click="back">返回</el-button>
            <table>
              <tr>
                <td class="bor" colspan="5">店铺信息</td>
              </tr>
              <tr class="xian">
                <td>店铺ID: {{dataList.shopUserId}}</td>
                <td>店铺名称：{{dataList.shopName}}</td>
                <td colspan="3">商家账号:{{dataList.appId}}</td>
              </tr>

              <tr>
                <td class="bor" colspan="5">订单信息</td>
              </tr>
              <tr>
                <td>账单号: {{dataList.outTradeNo}}</td>
                <td>支付编号: {{dataList.tradeNo}}</td>
                <td>支付时间: {{dataList.payTime}}</td>
                <td colspan="2">支付方式:{{dataList.payCahnnel}}</td>
              </tr>
              <tr class="xian">
                <td>买家昵称: {{dataList.buyerId}}</td>
                <td>买家账户: {{dataList.buyerAccount}}</td>
                <td>收货地址: {{dataList.buyerAddress||'空'}}</td>
                <td colspan="2">收货时间:{{dataList.receiptTimt||'-'}}</td>
              </tr>
              <tr>
                <td class="bor" colspan="5">商品信息</td>
              </tr>
              <tr>
                <td>商品编号: {{dataList.goodsId}}</td>
                <td>商品名称: {{dataList.goodsName}}</td>
                <td>
                  商品图片:
                  <img
                    style="width:100px;height:80px;"
                    src="https://t8.baidu.com/it/u=1484500186,1503043093&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1599444312&t=aa8df36ca02b88cc68fc60901bc92494"
                    alt
                  />
                  <!-- <img style="width:100px;height:80px;" :src="dataList.goodsImgUrl" alt /> -->
                </td>
                <td style="width:500px">单价: {{dataList.goodsPrice}}</td>
                <td style="width:300px">数量: {{dataList.goodsNum}}</td>
              </tr>
              <tr class="xian">
                <!-- 商品金额 -->
                <td>商品金额: ￥{{dataList.goodsTotalFee}}</td>
                <!-- 运费 -->
                <td>运费: {{dataList.postage||'-'}}</td>
                <td colspan="3">实付金额: ￥{{dataList.payMoney}}</td>
              </tr>
              <tr>
                <td class="bor" colspan="5">售后信息</td>
              </tr>
              <tr>
                <td>退款申请时间: {{dataList.refundApplyTime||" - "}}</td>
                <td>退款理由: {{dataList.refundApplyRemark||" - "}}</td>
                <td colspan="3">退款成功时间: {{dataList.refundSuccessTime||" - "}}</td>
              </tr>
              <tr class="xian">
                <td>退款拒绝时间:{{dataList.refundRejectTime||" - "}}</td>
                <td colspan="4">退款拒绝理由: {{dataList.refundRejectRemark||" - "}}</td>
              </tr>
              <tr>
                <td class="bor" colspan="5">费用信息</td>
              </tr>
              <tr>
                <td>订单金额: ￥{{dataList.goodsTotalFee}}</td>
                <td>手续费: {{dataList.serviceCharge||" - "}}</td>
                <td>实结金额:￥ {{dataList.receiveMoney}}</td>
                <td colspan="2">订单状态: {{dataList.billStatus}}</td>
              </tr>
              <tr>
                <td>收款账户类型: {{dataList.payCahnnel||" - "}}</td>
                <td>收款账户: {{dataList.mchId||" - "}}</td>
                <td>结算周期: {{dataList.settlementInterval||" - "}}</td>
                <td colspan="2">预计结算时间: {{dataList.finalTime||" - "}}</td>
              </tr>
              <tr>
                <td colspan="5">结算时间: {{dataList.settlementTime||" - "}}</td>
              </tr>
            </table>
          </div>
        </template>
      </main>
    </div>
  </div>
</template>

<script>
import menuNav from "../../components/MenuNav";
import homeHeader from "../../components/Header";
export default {
  data() {
    return {
      dataList: {},
    };
  },
  components: {
    menuNav,
    homeHeader,
  },
  created() {
    this.setData();
  },
  methods: {
    setData() {
      this.$get("/cw/dyBillDetails/getById/" + this.$route.params.id).then(
        (res) => {
          console.log(res);
          if (res.data.code == 200) {
            this.dataList = res.data.data;
            // console.log(this.dataList);
            if (this.dataList.billStatus == 0) {
              this.dataList.billStatus = "待付款";
            } else if (this.dataList.billStatus == 1) {
              this.dataList.billStatus = "已结算";
            } else if (this.dataList.billStatus == 2) {
              this.dataList.billStatus = "退款中";
            } else if (this.dataList.billStatus == 3) {
              this.dataList.billStatus = "交易关闭";
            }
          } else {
            this.$message(res.data.msg);
          }
        }
      );
    },
    back() {
      this.$router.push("/oms");
    },
  },
};
</script>
<style scoped>
table {
  width: 100%;
  font-size: 18px;
  text-align: left;
}

td {
  line-height: 60px;
}

.xian {
  border-bottom: 1px dashed #ccc;
}
.bor {
  font-weight: bold;
}
</style>